<template>
  <poputLayout
    @closeWindow="closeWindow"
    title="收入与支出"
    @search="search"
    :isYear="true"
    :isDept="true"
    :isProject="true"
  >
    <div class="body-conatiner">
      <div class="list">
        <div class="list-header">
          <div class="title">年度</div>
          <div class="unit">单位：万元</div>
        </div>
        <div class="chart" ref="chart1"></div>
      </div>
      <div class="list">
        <div class="list-header">
          <div class="title">累计</div>
          <div class="unit">单位：万元</div>
        </div>
        <div class="chart" ref="chart2"></div>
      </div>
    </div>
  </poputLayout>
</template>

<script>
import poputLayout from "../../popup-layout";
import request from "@/utils/request";
import Qs from "qs";
import store from "@/store";
import echarts from "echarts";
export default {
  components: {
    poputLayout,
  },
  data() {
    return {
      form: {},
    };
  },
  mounted() {},
  methods: {
    search(val) {
      this.form = val;
      this.getData1();
      this.getData2();
    },
    isNumber(val) {
      var regPos = /^\d+(\.\d+)?$/; //非负浮点数
      var regNeg =
        /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/; //负浮点数
      if (regPos.test(val) || regNeg.test(val)) {
        return true;
      } else {
        return false;
      }
    },
    getData1() {
      request({
        url: "/system/screen/monthInOut",
        method: "post",
        headers: { "content-type": "application/x-www-form-urlencoded" },
        data: Qs.stringify({
          deptId: this.form.deptId,
          year: this.form.year,
          projectId: this.form.projectId,
        }),
      }).then((res) => {
        const x = [];
        const y1 = [];
        const y2 = [];
        for (let i = 0; i < 12; i++) {
          x.push(`${i + 1}月`);
        }
        for (const i in res.data) {
          // const data = res.data[i].split("|");
          let data = [0, 0];

          if (res.data[i]) {
            data = res.data[i].split("|");
          }
          console.log(this.isNumber(Number(data[0])), data[0]);
          if (!this.isNumber(data[0])) {
            data[0] = 0;
          }
          if (!this.isNumber(data[1])) {
            data[1] = 0;
          }
          y1.push((Number(data[0]) / 10000).toFixed(4) || 0);
          y2.push((Number(data[1]) / 10000).toFixed(4) || 0);
        }
        this.init1(y1, y2, x);
      });
    },
    getData2() {
      request({
        url: "/system/screen/yearInOut",
        method: "post",
        headers: { "content-type": "application/x-www-form-urlencoded" },
        data: Qs.stringify({
          deptId: this.form.deptId,
          year: this.form.year,
          projectId: this.form.projectId,
        }),
      }).then((res) => {
        const x = [];
        const y1 = [];
        const y2 = [];
        for (const i in res.data) {
          x.push(i);
          // const data = res.data[i].split("|");
          let data = [0, 0];

          if (res.data[i]) {
            data = res.data[i].split("|");
          }
          y1.push((Number(data[0]) / 10000).toFixed(4) || 0);
          y2.push((Number(data[1]) / 10000).toFixed(4) || 0);
        }
        this.init2(y1, y2, x);
      });
    },
    init1(yData1, yData2, xData) {
      const chart = echarts.init(this.$refs.chart1);
      // chart.clear(); //每次绘制清除一次画布
      // this.echartInit = chart;
      const option = {
        tooltip: {
          trigger: "axis",
        },
        // legend: {
        //   data: ["开票", "收款"],
        //   x: "top",
        //   y: "left",
        //   padding: [10, 0, 0, 16],
        //   textStyle: {
        //     fontSize: 14,
        //     color: "rgba(0,0,0,.48)",
        //   },
        //   icon: "circle",
        //   itemWidth: 12,
        //   itemHeight: 12,
        //   itemGap: 12,
        // },
        grid: {
          top: "20",
          left: "0",
          right: "20",
          bottom: "0",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(0, 51, 128, 1)",
          borderColor: "rgba(0, 79, 197, 1)",
          borderWidth: 2,
          padding: 10,
          textStyle: {
            color: "#8FC7FF",
          },
          formatter: function (params) {
            let time = `${new Date().getFullYear()}年${params[0].axisValue}`;
            if (params[0].axisValue.length > 3) {
              time = `${params[0].axisValue}年`;
            }
            const tip1 = `${params[0].marker}收入:${params[0].value}万元`;
            const tip2 = `${params[1].marker}支出:${params[1].value}万元`;
            return `${time}</br>${tip1}</br>${tip2}`;
          },
        },
        xAxis: {
          type: "category",
          //   boundaryGap: false,
          data: xData,
          axisTick: {
            show: false,
          },

          axisLine: {
            lineStyle: {
              // 设置轴颜色
              color: "rgba(143, 199, 255, .16)",
            },
          },
          axisLabel: {
            color: "rgba(143, 199, 255, .48)", //x轴文本颜色
          },
        },
        yAxis: {
          type: "value",
          axisTick: {
            show: false,
          },
          //网格样式
          splitLine: {
            show: true,
            lineStyle: {
              color: ["rgba(0,0,0,.04)"],
              width: 1,
              type: "solid",
            },
          },
          axisLine: {
            show: false,
            lineStyle: {
              // 设置轴颜色
              color: "rgba(0,0,0,.48)",
            },
          },
          axisLabel: {
            color: "rgba(143, 199, 255, .48)", //x轴文本颜色
          },
          //   show:false,
        },
        series: [
          {
            name: "收入",
            type: "bar",
            symbol: "circle",
            color: "rgba(31, 197, 87, 1)",
            data: yData1,
            itemStyle: {
              normal: {
                lineStyle: {
                  width: 2, //设置线条粗细
                },
              },
            },
          },
          {
            name: "支出",
            type: "bar",
            symbol: "circle",
            color: "rgba(243, 104, 75, 1)",
            data: yData2,
            itemStyle: {
              normal: {
                lineStyle: {
                  width: 2, //设置线条粗细
                },
              },
            },
          },
        ],
      };
      chart.setOption(option);
      const resize = window.addEventListener("resize", () => {
        this.$nextTick(() => {
          setTimeout(() => {
            chart.resize();
          }, 500);
        });
      });
      this.$once("hook:beforeDestroy", () => {
        window.removeEventListener("resize", resize);
      });
    },
    init2(yData1, yData2, xData) {
      const chart = echarts.init(this.$refs.chart2);
      // chart.clear(); //每次绘制清除一次画布
      // this.echartInit = chart;
      const option = {
        tooltip: {
          trigger: "axis",
        },
        // legend: {
        //   data: ["开票", "收款"],
        //   x: "top",
        //   y: "left",
        //   padding: [10, 0, 0, 16],
        //   textStyle: {
        //     fontSize: 14,
        //     color: "rgba(0,0,0,.48)",
        //   },
        //   icon: "circle",
        //   itemWidth: 12,
        //   itemHeight: 12,
        //   itemGap: 12,
        // },
        grid: {
          top: "20",
          left: "0",
          right: "20",
          bottom: "0",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(0, 51, 128, 1)",
          borderColor: "rgba(0, 79, 197, 1)",
          borderWidth: 2,
          padding: 10,
          textStyle: {
            color: "#8FC7FF",
          },
          formatter: function (params) {
            let time = `${new Date().getFullYear()}年${params[0].axisValue}`;
            if (params[0].axisValue.length > 3) {
              time = `${params[0].axisValue}年`;
            }
            const tip1 = `${params[0].marker}收入:${params[0].value}万元`;
            const tip2 = `${params[1].marker}支出:${params[1].value}万元`;
            return `${time}</br>${tip1}</br>${tip2}`;
          },
        },
        xAxis: {
          type: "category",
          //   boundaryGap: false,
          data: xData,
          axisTick: {
            show: false,
          },

          axisLine: {
            lineStyle: {
              // 设置轴颜色
              color: "rgba(143, 199, 255, .16)",
            },
          },
          axisLabel: {
            color: "rgba(143, 199, 255, .48)", //x轴文本颜色
          },
        },
        yAxis: {
          type: "value",
          axisTick: {
            show: false,
          },
          //网格样式
          splitLine: {
            show: true,
            lineStyle: {
              color: ["rgba(0,0,0,.04)"],
              width: 1,
              type: "solid",
            },
          },
          axisLine: {
            show: false,
            lineStyle: {
              // 设置轴颜色
              color: "rgba(0,0,0,.48)",
            },
          },
          axisLabel: {
            color: "rgba(143, 199, 255, .48)", //x轴文本颜色
          },
          //   show:false,
        },
        series: [
          {
            name: "收入",
            type: "bar",
            symbol: "circle",
            color: "rgba(31, 197, 87, 1)",
            data: yData1,
            itemStyle: {
              normal: {
                lineStyle: {
                  width: 2, //设置线条粗细
                },
              },
            },
          },
          {
            name: "支出",
            type: "bar",
            symbol: "circle",
            color: "rgba(243, 104, 75, 1)",
            data: yData2,
            itemStyle: {
              normal: {
                lineStyle: {
                  width: 2, //设置线条粗细
                },
              },
            },
          },
        ],
      };
      chart.setOption(option);
      const resize = window.addEventListener("resize", () => {
        this.$nextTick(() => {
          setTimeout(() => {
            chart.resize();
          }, 500);
        });
      });
      this.$once("hook:beforeDestroy", () => {
        window.removeEventListener("resize", resize);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/views/report_form_dark/styles/fn.scss";

.body-conatiner {
  width: vw(1136);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: space-around;
  padding-top: vw(20);

  .list {
    width: vw(494);
    height: vh(289);
    background: #002463;
    border-radius: vw(4);
    margin: vh(20) 0;

    .list-header {
      width: 100%;
      height: vw(58);
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      padding: 0 vw(24);

      .title {
        font-size: vw(14);
        font-family: Microsoft YaHei UI;
        font-weight: bold;
        color: #8fc7ff;
      }

      .unit {
        font-size: vw(14);
        font-family: Microsoft YaHei UI;
        font-weight: 400;
        color: #8fc7ff;
        opacity: 0.4;
      }
    }

    .chart {
      width: 100%;
      height: calc(100% - #{vw(58)});
      padding: vw(10) vw(20);
    }
  }
}
</style>